{{define "list"}} {{template "left" .}}
<div id="product_list" v-cloak>
    <div method="POST" class="layui-form layui-form-pane" action="">
        <div class="layui-row">
            <div class="layui-col-xs4">
                <div class="layui-form-item">
                    <label class="layui-form-label">产品状态</label>
                    <div class="layui-input-block">
                        <select name="is_delete" lay-verify="required" v-model="isDelete" lay-filter="isDelete">
                            <option value="-1">全部</option>
                            <option value="0">上线</option>
                            <option value="1">下线</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <table class="layui-table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>进货</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>${item.id}</td>
                    <td>
                        <input type="text" class="layui-input" name="product_name[${item.id}]" v-model="item.product_name">
                    </td>
                    <td>
                        <input type="text" class="layui-input" name="price[${item.id}]" v-model="item.price">
                    </td>
                    <td>
                        <input type="text" class="layui-input" name="count[${item.id}]" v-model="item.count">
                    </td>
                    <td>
                        <input type="text" class="layui-input" name="purcase[${item.id}]" v-model="item.purcase">
                    </td>
                    <td>
                        <button class="layui-btn layui-btn-small" @click="changeIsDelete(item.id,item.is_delete)" :class="item.is_delete==0?'layui-btn-danger':''">
                            ${item.is_delete==0?'下线':'上线'}
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button class="layui-btn" lay-submit lay-filter="productUp">立即修改</button>
    </div>
</div>
<script>
    require(['jquery', 'vue', 'layui'], function ($, Vue) {
        ProductListVue = new Vue({
            el: '#product_list',
            data: {
                list: jQuery.parseJSON('{{.List}}'),
                isDelete: '{{.isDelete}}'
            },
            methods: {
                changeIsDelete: function (product_id, is_delete) {
                    layui.use(['form', 'layer'], function () {
                        is_delete = is_delete == 0 ? 1 : 0;
                        var layer = layui.layer;
                        var message = is_delete == 1 ? '下线' : '上线';
                        layer.confirm('确认' + message + '产品' + product_id + '?', function (index) {
                            var datas = {};
                            datas.is_delete = is_delete;
                            $.post("/Product/ChangeStatus?id=" + product_id, datas,
                                function (result) {
                                    if (result.Code == 200) {
                                        window.location.reload();
                                    } else {
                                        layer.msg(result.Message)
                                    }
                                }, "json")
                            layer.close(index);;
                        });
                    })
                }
            },
            watch: {}
        });
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;
            form.on('submit(productUp)', function (data) {
                var datas = {};
                datas.list = JSON.stringify(ProductListVue.list);
                $.post("/Product/Update", datas, function (result) {
                    if (result.Code == 200) {
                        location.href = "/Product/List";
                    } else {
                        layer.msg(result.Message)
                    }
                }, "json")
            })
            form.on('select(isDelete)', function (data) {
                location.href = "/Product/List?is_delete=" + data.value;
            })
        });
    })
</script>
{{template "footer"}} {{end}}